<template>
<div class="">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <i class="el-icon-edit"></i>
      <span>发布</span>
    </div>
    <el-select
      v-model="tags"
      class="w-100"
      multiple
      filterable
      allow-create
      default-first-option
      placeholder="请选择文章标签">
      <el-option
        v-for="item in options5"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-row class="mt-3">
      <el-button type="primary" size="medium" @click="save('publish')">发&nbsp;&nbsp;&nbsp;布</el-button>
      <el-button size="medium" @click="save('save')">保存草稿</el-button>
    </el-row>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'publish',
  title: '发布选项',
  data() {
    return {
      options5: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        tags: []
    }
  },
  methods: {
    save (type) {
      this.$emit('save-or-publish', type, this.tags)
    },

  }
}
</script>

<style lang="scss">
.el-tag + .el-tag {
   margin-left: 10px;
 }
 .button-new-tag {
   margin-left: 10px;
   height: 32px;
   line-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
 }
 .input-new-tag {
   width: 90px;
   margin-left: 10px;
   vertical-align: bottom;
 }
</style>
